<template>
  <page-wrap
    back
    hide-tab
    title="订单管理"
    stay-still
    :show-top="true"
    :bg-color="uNavColor"
  >
    <view class="order-manage-before">
      <view class="list">
        <view
          class="list-item"
          v-for="(item, index) in optionList"
          :key="index"
          @click="handleRoute(item)"
        >
          <view class="list-item-left">
            <text :class="['item-icon', item.icon]"></text>
            {{ item.name }}
          </view>
          <view class="list-item-right">
            <text class="list-item_label">{{ item.label }}</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
export default {
  data() {
    return {
      uNavColor: "#F7F8FA",
      optionList: [
        {
          name: "付费用户管理",
          icon: "icon3",
          url: "/pagesSub/orderManage/index",
        },
        {
          name: "非付费用户管理",
          icon: "icon3",
          url: "/pagesSub/orderManageForFree/index",
        },
      ],
    };
  },
  methods: {
    handleRoute(item) {
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-manage-before {
  .list {
    flex: 1;
    margin: 0 32rpx;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      height: 88rpx;
      line-height: 88rpx;
      padding: 0 32rpx;
      background-color: $uni-bg-color;
      border-radius: 20rpx;
      margin-bottom: 24rpx;
      &_label {
        margin-right: 18rpx;
        font-size: $uni-font-size-sm;
        color: $u-type-primary;
      }
    }
  }
}
</style>
